<template>
  <div class="user-page">
    <!-- 用户信息 -->
    <div class="user-info">
      <van-image round class="avatar" :src="userInfo.avatar" />
      <h3>{{userInfo.username}}</h3>
    </div>
    <!-- 历史记录 -->
    <van-grid :column-num="3">
      <van-grid-item v-for="obj in list" :key="obj.id" :icon="obj.iconText" :text="obj.text" />
    </van-grid>
    <!-- 推荐分享 -->
    <van-cell-group class="cell-group">
      <van-cell title="推荐分享" is-link />
      <van-cell title="意见反馈" is-link />
      <van-cell title="关于我们" is-link />
      <van-cell title="退出登录" is-link @click="toKen" />
    </van-cell-group>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
export default {
  name: 'user-page',
  props: {},
  components: {},
  data () {
    return {
      list: [{
        id: 1,
        iconText: 'underway-o',
        text: '历史记录'
      },
      {
        id: 2,
        iconText: 'completed',
        text: '我的收藏'
      },
      {
        id: 3,
        iconText: 'thumb-circle-o',
        text: '我的点赞'
      }],
      show: false,
      active: 0,
      userInfo: {}
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      const { data } = await getUserInfo()
      this.userInfo = data.data
    },
    toKen () {

    }

  }

}
</script>

<style lang="less" scoped>
// 整个页面
.user-page {
  padding: 0 10px;
  background-color: #f5f5f5;
  // div盒子的默认高度为0，由里面内容撑开。给这个页面最大的div盒子设置最小高度为100vh
  min-height: 100vh;
}
// 用户信息
.user-info {
  padding: 20px 0;
  display: flex;
  align-items: center;
  .avatar {
    width: 80px;
    height: 80px;
  }
  h3 {
    margin: 0;
    padding-left: 20px;
    font-size: 18px;
  }
}
// 推荐分享等
.cell-group {
  margin-top: 20px;
}
</style>
